<template>
    <div>
        <!-- 轮播图 -->
        <el-carousel class="carousel" height="350px" :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
                <img src="../../assets/images/web-banner-1.png" alt="">
            </el-carousel-item>
        </el-carousel>

        <div class="search">
            <el-autocomplete placeholder="请输入内容" />
            <el-button type="primary" size="default" :icon="Search">搜索</el-button>
        </div>


        <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

<!--     
        <p>用法1</p>
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <p>用法2</p> <el-icon>
            <Plus />
        </el-icon>
        <p>用法3</p>
        <Edit style="width: 1em; height: 1em; margin-right: 8px" /> -->

    </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
import { ref } from 'vue'

 
const currentPage4 = ref(4)
 
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

// / 设置轮播图的背景
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.carousel {
    img {
        width: 100%;
        height: 350px;
    }
}

.search {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;

    ::v-deep(.el-input){
        width: 600px;
        margin-right: 5px;
    }

}
</style>